<template>
	<view>
		<swiper class="swiper" circular autoplay>
			<swiper-item v-for="(item,index) in roomTypeImage" :key='index'>
				<image class="bg" :src="item.sourceUrl+'?x-oss-process=image/resize,m_fixed,h_240,w_350'" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<view class="cu-list menu margin-top">
			<view class="cu-item arrow" @tap='show=true' v-if="!type">
				<view class="text-xl margin-right text-yellow light">
					<text class="cuIcon-remind"></text>
				</view>
				<view class="text-sm text-left" style="width: 100%;">
					{{time[0]}}入住/{{time[1]}}离店
				</view>
				<view class="action cu-tag bg-yellow light radius">
					共{{num}}晚
				</view>
			</view>
			<view v-else class="cu-item arrow">
				<view class="text-xl margin-right text-yellow light">
					<text class="cuIcon-remind"></text>
				</view>
				<view class="text-sm text-left" style="width: 100%;">
					{{time[0]}}入住
				</view>
			</view>
		</view>
		<view class="bg-white margin-top">
			<view class="flex padding">
				<view>房型</view>
				<view class="text-sm text-gray">{{hotelObj.typeName}}</view>
			</view>
			<view class="flex padding">
				<view>房间数量</view>
				<view class="text-sm text-gray">1间</view>
			</view>
			<view class="flex padding">
				<view>入住人数</view>
				<u-number-box 
				v-model="peopleNum"
				disabled-input
				:min="1" :max="3"></u-number-box>
			</view>
			<view v-if="type" class="flex padding">
				<view style="flex-shrink: 0;">预订时间</view>
				<view style="width: 100%;position: relative;">
					<slider style="width: 83%;display: inline-block;" @change='sliderChange' block-size='12' min="1" max="72" show-value />
					<text style="position: absolute;right: 0;top: 50%;transform: translate(0,-50%);">小时</text>
				</view>
			</view>
			<view class="padding">
				<!-- <view>入住人</view>
				<view>
					<span v-if='occupantsIndex>-1'>{{occupants[occupantsIndex].guestName}}</span>
					<button @tap='modalName="bottomModal"' class="cu-btn bg-yellow round margin-left">{{occupantsIndex>-1?'修改':'添加'}}</button>
				</view> -->
				<view>
					<view class="flex margin-bottom" v-for="(i,index) in occupants" :key='index' v-if="occupantsIndex.indexOf(index.toString())>-1">
						<view style="flex-shrink: 0;width: 30vw;text-align: right;">{{i.guestName}}</view>
						<view style="width: 60vw; text-align: center;">{{getXh(i.guestPhone)}}</view>
						<view @tap='delOccupantsIndex(index)'>
							<u-icon style="font-size: 32rpx;" name="close-circle"></u-icon>
						</view>
					</view>
				</view>
				<view style="width: 100%;" class="cu-btn bg-yellow xl margin-top" @tap='modalName="bottomModal"'>
					<u-icon name="plus"></u-icon>选择入住人
				</view>
			</view>
		</view>
		<view class="bg-white margin-top">
			<view class="cu-form-group margin-top">
				<view class="title">是否将订单共享给入住人</view>
				<switch @change="SwitchA" :class="switchA?'checked':''" :checked="switchA?true:false"></switch>
			</view>
		</view>
		<view class="bg-white">
			<view class="flex padding">
				<view>支付方式</view>
				<view>
					<radio-group class="flex" @change="payTypeChange">
						<label style="padding-left: 20rpx;" class="uni-list-cell uni-list-cell-pd flex" v-for="(item, index) in payTypeArray" :key="index">
							<view><radio style="scale:0.8;" :value="index" :checked="index == payTypeIndex" /></view>
							<view>{{ item }}</view>
						</label>
					</radio-group>
				</view>
			</view>
			<view v-if="!type" class="flex padding">
				<view>选择优惠券</view>
				<view v-if="couponNum<1">无可用优惠券</view>
				<view v-else @tap.stop='selectCoupon'>
					<template v-if="!coupon.id">
						{{couponNum}}张可用 
					</template>
					<template v-else>
						<text>
							{{coupon.couponTitle}}
						</text>
						<text class="text-orange" style="margin: 0 10rpx;">{{couponMoney()}}</text>
					</template>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view v-if="!type" class="flex padding">
				<view>选择活动</view>
				<view v-if="activitesList.length<1">无可用活动</view>
				<view v-else @tap.stop='selectActivites'>
					<template v-if="!activites.id">
						{{activitesList.length}}个活动可用
					</template>
					<template v-else>
						<text>
							{{activites.activityName}}
						</text>
						<text class="text-orange" style="margin: 0 10rpx;">{{activitesMoney()}}</text>
					</template>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="flex padding text-red">
				<view>押金金额</view>
				<view>
					+{{hotelObj.deposit}}
				</view>
			</view>
		</view>
		<view class="bg-white margin-top padding">
			<view class="text-bold">
				<text class="text-df">退款规则</text>
			</view>
			<view class="text-gray margin-top">
				<view>距离入住≥1天取消,联系客服（400-878-7651）可免费取消;</view>
				<view>入住当天取消或提前退房,退款发生后1-3天内完成退款;</view>
				<view>押金退还，在申请离店后客房服务人员查房后，如有消费 则扣除金额后剩余部分在1-2小时内退回，若无消费则退 还全部押金。</view>
			</view>
		</view>
		<view class="cu-bar bg-white tabbar border shop">
			<view v-if="!type" style="width: 70%;">
				<template v-if="payTypeIndex==0">
					<view class="text-price text-red text-xxl margin-lr">
						{{getLastMoney()}}
					</view>
				</template>
				<template v-else>
					<view class="text-red margin-lr">
						<text style="margin: 0 5rpx; font-size: 16rpx;" class="text-gray">科爱豆</text> <text class="text-xl">{{(orderMoney-couponPrice - activitesPrice)*10>0?Math.ceil((orderMoney-couponPrice - activitesPrice)*10):0}}+</text>
						<text style="margin: 0 5rpx; font-size: 16rpx;" class="text-gray">押金</text> <text class="text-price text-xl">{{Number(hotelObj.deposit)}}</text>
					</view>
				</template>
			</view>
			<view v-else style="width: 70%;">
				<template v-if="payTypeIndex==0">
					<view class="text-price text-red text-xxl margin-lr">
						{{Number(secondPrice)+Number(hotelObj.deposit)}}
					</view>
				</template>
				<template v-else>
					<view class="text-red margin-lr">
						<text style="margin: 0 5rpx; font-size: 16rpx;" class="text-gray">科爱豆</text> <text class="text-xl">{{Math.ceil(secondPrice*10)}}+</text>
						<text style="margin: 0 5rpx; font-size: 16rpx;" class="text-gray">押金</text> <text class="text-price text-xl">{{Number(hotelObj.deposit)}}</text>
					</view>
				</template>
			</view>
			<!-- <view style="width:50%;"></view> -->
			<view @tap.stop='submitOrder' v-if="!type" class="bg-yellow submit">提交订单</view>
			<view @tap.stop='preSecondOrder' v-else class="bg-yellow submit">提交订单</view>
		</view>
		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
			<view class="cu-dialog" @tap.stop=''>
				<view class="cu-bar bg-white">
					<view class="action text-green" @tap="newPeople">新增入住人</view>
					<view class="action text-blue" @tap="modalName=null">确定</view>
				</view>
				<view class="padding">
					<checkbox-group class="flex" @change="occupantsChange">
						<view class="occupants">
							<label style="padding-left: 20rpx;" class="uni-list-cell uni-list-cell-pd flex" v-for="(item, index) in occupants" :key="index">
								<view><checkbox style="scale:0.8;" :value="index" :checked="occupantsIndex.indexOf(index.toString())>-1" /></view>
								<view class="text-right">{{ item.guestName+"&nbsp;&nbsp;&nbsp;&nbsp;"+getXh(item.guestPhone)}} </view>
								<view @tap.stop='newPeople(item)'>
									<u-icon name="edit-pen"></u-icon>
								</view>
							</label>
						</view>
					</checkbox-group>
				</view>
			</view>
		</view>
		<view style="height:100rpx;"></view>
		<u-calendar
		start-text='住店'  
		end-text='离店'
		btn-type='warning'
		active-bg-color='#ff9900'
		range-bg-color='#fdf6ec'
		range-color='#ff9900'
		v-model="show" 
		:mode="type?'date':'range'"
		:min-date='minDate'
		max-date="3000-12-31"
		@change='changeTime'>
			<view slot="tooltip">
				<view class="text-center margin-top">
					请选择住店/离店时间
				</view>
			</view>
		</u-calendar>
	</view>
</template>

<script>
	import order from './order.js'
	export default order
</script>

<style lang="scss" scoped>
.swiper{
	width: 100vw;
	height: 480rpx;
	image{
		width: 100%;
	}
}
.occupants{
	.text-right{
		width: 50vw;
		margin-right: 25vw;
	}
}
.flex{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.tabbar{
	position: fixed;
	bottom: 0;
	height: 100rpx;
	width: 100vw;
}
</style>
